<template>
  <Card>
    <p slot="title">文章管理</p>
    <Table border :columns="columns12" :data="data6" :loading="false">
      <!--<template slot-scope="{ row }" slot="title">
        <Tooltip :content="row.title" placement="top-start">
          <strong>{{ row.title }}</strong>
        </Tooltip>
      </template>-->
      <template slot-scope="{ row }" slot="top">
        <i-switch :value="row.top" size="default" :true-value="1" :false-value="0"/>
        <!--<strong>{{ row.top }}</strong>-->
      </template>
      <template slot-scope="{ row }" slot="display">
        <i-switch :value="row.display" size="default" :true-value="1" :false-value="0"/>
        <!--<strong>{{ row.top }}</strong>-->
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
        <Button type="error" size="small" @click="confirm(index)">删除</Button>
      </template>
    </Table>
  </Card>
</template>
<script>
    export default {
        name: 'article_list',
        data() {
            return {
                columns12: [
                    {
                        type: 'index',
                        width: 50,
                        align: "center"
                    },
                    {
                        title: '标题',
                        key: 'title',
                        width: 250,
                        ellipsis: true,
                        tooltip: true
                    },
                    {
                        title: '状态',
                        key: 'status'
                    },
                    {
                        title: '是否顶置',
                        slot: 'top'
                    },
                    {
                        title: '是否可见',
                        slot: 'display'
                    },
                    {
                        title: '创建人',
                        key: 'create_user'
                    },
                    {
                        title: '创建时间',
                        key: 'create_time'
                    },
                    {
                        title: '更新时间',
                        key: 'update_time'
                    },
                    {
                        title: 'Action',
                        slot: 'action',
                        width: 150,
                        align: 'center',
                        fixed: 'right'
                    }
                ],
                data6: [
                    {
                        title: 'Spring 测试测试测试测试测试测试测试测试测试测试测试2',
                        status: 1,
                        top: 1,
                        display: 1,
                        create_user: '张三',
                        create_time: '2019-09-06',
                        update_time: '2019-09-06'
                    },
                    {
                        title: 'Spring 测试测试测试测试测试测试测试测试测试测试测试',
                        status: 1,
                        top: 1,
                        display: 1,
                        create_user: '张三',
                        create_time: '2019-09-06',
                        update_time: '2019-09-06'
                    },
                    {
                        title: 'Spring 测试测试测试测试测试测试测试测试测试测试测试',
                        status: 1,
                        top: 1,
                        display: 1,
                        create_user: '张三',
                        create_time: '2019-09-06',
                        update_time: '2019-09-06'
                    },
                    {
                        title: 'Spring 测试测试测试测试测试测试测试测试测试测试测试',
                        status: 1,
                        top: 1,
                        display: 1,
                        create_user: '张三',
                        create_time: '2019-09-06',
                        update_time: '2019-09-06'
                    },
                    {
                        title: 'Spring 测试测试测试测试测试测试测试测试测试测试测试',
                        status: 1,
                        top: 1,
                        display: 1,
                        create_user: '张三',
                        create_time: '2019-09-06',
                        update_time: '2019-09-06'
                    },
                    {
                        title: 'Spring 测试测试测试测试测试测试测试测试测试测试测试',
                        status: 1,
                        top: 1,
                        display: 1,
                        create_user: '张三',
                        create_time: '2019-09-06',
                        update_time: '2019-09-06'
                    },
                    {
                        title: 'Spring 测试测试测试测试测试测试测试测试测试测试测试',
                        status: 1,
                        top: 1,
                        display: 1,
                        create_user: '张三',
                        create_time: '2019-09-06',
                        update_time: '2019-09-06'
                    },
                    {
                        title: 'Spring 测试测试测试测试测试测试测试测试测试测试测试',
                        status: 1,
                        top: 1,
                        display: 1,
                        create_user: '张三',
                        create_time: '2019-09-06',
                        update_time: '2019-09-06'
                    },
                    {
                        title: 'Spring 测试测试测试测试测试测试测试测试测试测试测试',
                        status: 1,
                        top: 1,
                        display: 1,
                        create_user: '张三',
                        create_time: '2019-09-06',
                        update_time: '2019-09-06'
                    },
                    {
                        title: 'Spring 测试测试测试测试测试测试测试测试测试测试测试',
                        status: 1,
                        top: 1,
                        display: 1,
                        create_user: '张三',
                        create_time: '2019-09-06',
                        update_time: '2019-09-06'
                    }
                ]
            }
        },
        methods: {
            show(index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
                })
            },
            remove(index) {
                this.data6.splice(index, 1);
            },
            confirm(index) {
                this.$Modal.confirm({
                    title: '警告',
                    content: '<p>确定删除此文章吗？</p>',
                    onOk: () => {
                        this.remove(index)
                    },
                    onCancel: () => {
                        this.$Message.info('Clicked cancel');
                    }
                });
            },
        }
    }
</script>
<style lang="less">
  .ivu-tooltip-inner {
    max-width: max-content !important;
  }
</style>
